<template>
  <div>
    <van-search  placeholder="请输入搜索关键词" @click="toSearch"/>
    <More :title="MovieTitle[0]" >
      <span slot="more" class="more" @click="toMore(MovieTitle[0])">更多></span>
    </More>
   <div class="item">
     <movie-item v-for="item of hot" :item="item" :key="item._id" @click.native="toDetail(item._id)"></movie-item>
   </div>
   <More :title="MovieTitle[1]" >
      <span slot="more" class="more" @click="toMore(MovieTitle[1])" >更多></span>
    </More>
   <div class="item">
     <movie-item v-for="item of coming" :item="item" :key="item._id" @click.native="toDetail(item._id)"></movie-item>
   </div>
   <More :title="MovieTitle[2]" >
      <span slot="more" class="more" @click="toMore(MovieTitle[2])">更多></span>
    </More>
   <div class="item">
     <movie-item v-for="item of top" :item="item" :key="item._id" @click.native="toDetail(item._id)"></movie-item>
   </div>
  </div>
</template>

<script>
import More from "./component/More.vue";
import MovieItem from "./component/MovieItem.vue";
export default {
  data() {
    return {
      MovieTitle: ["正在热映", "即将上映", "top250"],
      hot:[],
      coming:[],
      top:[]
    };
  },
  components: {
    More,
    MovieItem
  },
  mounted() {
    this.$http("http://122.112.161.135:4000/api/movie/inTheaters").then((res) => {
      res.data.res.forEach((item) => {
        var { raiting } = item;
        item.star = this.handleStar(raiting);
        item.rating = raiting;
      });
      this.hot = res.data.res.slice(0,3)
    });
     this.$http("http://122.112.161.135:4000/api/movie/comingSoon").then((res) => {
      res.data.res.forEach((item) => {
        var { rating } = item;
        item.star = this.handleStar(rating);
      });
      this.coming = res.data.res.slice(0,3)
    });
     this.$http("http://122.112.161.135:4000/api/movie/top250").then((res) => {
      res.data.res.forEach((item) => {
        var { rating } = item;
        item.star = this.handleStar(rating);
      });
      this.top = res.data.res.slice(0,3)
    });
  },
  methods: {
    handleStar(num) {
      var arr = [];
      for (var i = 0; i < 5; i++) {
        if (num > 2) {
          arr.push(2);
        } else if (num > 0) {
          arr.push(Number(num).toFixed(2));
        } else {
          arr.push(0);
        }
        num-=2
      }
      return arr;
    },
    toMore(val){
      var title = val;
      this.$router.push(`./MovieDetail?title=${title}`)
    },
    toDetail(val){
      this.$router.push(`./moreDetail/${val}`)
    },
    toSearch(){
      this.$router.push(`./movieSearch`)
    }
  },
};
</script>

<style>
.item{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  font-size: 1em;
}
.more{
  display: inline-block;
  float: right;
}
</style>